<template>

  <el-config-provider :size="size" :z-index="zIndex">
    <NuxtPage />
  </el-config-provider>
    <!-- <v-app>
        <NuxtPage />
    </v-app> -->
</template>


<script setup>
  // Vuetify
  // import 'vuetify/styles'
  import { onMounted, shallowRef } from 'vue'

  // const order = shallowRef(0)

const zIndex = shallowRef(3000)
const size = shallowRef('small')
onMounted(()=>{
  // 检测系统主题偏好
  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

  function updateTheme() {
    if (darkModeMediaQuery.matches) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }

  // 初始检测
  // updateTheme();

  // 监听系统主题变化
  // darkModeMediaQuery.addListener(updateTheme);
})
</script>

<style>
html,body,#app {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}
#app {
  /* display: flex; */
}
</style>